import SuperTableVue from "@/components/SuperTable";
import {GetRolePermission,SaveOrUpdate,DeleteById} from "@/service";
import {ElButton} from "element-plus";
import {h} from "vue";


export default new SuperTableVue({
    tableConfig:{
        props:[//表格的列信息
            { prop: 'rolekey', label: '岗位key', minWidth: '150'},
            { prop: 'rolename', label: '岗位名称', minWidth: '50',},
            { prop: 'remarks', label: '备注', minWidth: '130' },
            { prop: 'createtime', label: '创建时间', minWidth: '100',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
            { prop: 'updatetime', label: '更新时间', minWidth: '100',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
            { prop: 'handler',label: '操作', minWidth: '150',slot:function(scope){
                return  (
                        <div>
                            <ElButton type="success" size="small" onClick={()=>this.detail(scope.row)}>{()=>'详情'}</ElButton>
                            <ElButton type="primary" size="small" onClick={()=>this.edit(scope.row)}>{()=>'编辑'}</ElButton>
                            <ElButton type="warning" size="small" onClick={()=>this.delete(scope.row)}>{()=>'删除'}</ElButton>
                        </div>
                        )
                }
            }
        ],
        getDataFunction:(pagenum,pagesize,queryInfo)=>{//数据初始化方法
            //组参阶段
            let params = {
                pageIndex:pagenum,
                pageSize:pagesize,
                rolename:queryInfo.rolename
            }
            return GetRolePermission(params).then(res=>{
                if (res.data && res.code == "200") {
                    const querysuccess = true;
                    const totalcount = res.total;
                    const datalist = res.data
                    return ({querysuccess,totalcount,datalist})
                }
            })
        },

    },
    searchConfig:{//搜索区域配置
        props: [
            {
                field: 'rolename',
                type: 'input',
                label: '岗位名称',
                placeholder: '请输入岗位名称'
            },
        ],
        slot:function({queryData,resetQueryData}){
            return (
                <div>
                    <ElButton type="primary" onClick={()=>queryData()}>
                        查询
                    </ElButton>
                    <ElButton type="warning" onClick={()=>resetQueryData()}>
                        重置
                    </ElButton>
                    <ElButton type="success" onClick={()=>this.add()}>
                        新增
                    </ElButton>
                </div>
            )
        },
    },
    rowAddConfig:{//如果调用this.edit()方法,那么会根据这个配置打开默认的编辑界面,如果不用默认的,那这个就不用定义了
        props:async(row)=>{
            return [
                { field: 'rolekey', label: '岗位key',type: 'input',span:12, required: true },
                { field: 'rolename', label: '岗位名称',type: 'input',span:12 ,required: true },
                { field: 'remarks', label: '备注',type: 'input',span:12,required: true },
            ]
        },
        addDataFunction:(formdata)=>{
            return SaveOrUpdate('role',formdata).then(res=>{
                const ok = res.data && res.code == "200";
                const msg = res?.message;
                return ({ok,msg})
            })
        },
    },
    rowEditConfig:{//如果调用this.edit()方法,那么会根据这个配置打开默认的编辑界面,如果不用默认的,那这个就不用定义了
        props:async(row)=>{
            return [
                { field: 'rolekey', label: '岗位key',type: 'input', span:12 , required: true },
                { field: 'rolename', label: '岗位名称',type: 'input',span:12 , required: true },
                { field: 'remarks', label: '备注',type: 'input',span:12, required: true },
            ]
        },
        editDataFunction:(formdata)=>{
            return SaveOrUpdate('role',formdata).then(res=>{
                const ok = res.data && res.code == "200";
                const msg = res?.message;
                return ({ok,msg})
            })
        },
    },
    rowDetailConfig:{//如果调用this.detail()方法,那么会根据这个配置打开详情界面,如果没有定义这个,但是还是调用了this.detail()方法,那么会根据rowEdit的配置展示
        props:async(row)=>{
            return [
                    { field: 'rolekey', label: '岗位key',type: 'input', span:12,disabled:true},
                    { field: 'rolename', label: '岗位名称',type: 'input',span:12  ,disabled:true },
                    { field: 'remarks', label: '备注',type: 'input',span:12 ,disabled:true },
                ]
        },
    },
    rowDeleteConfig:{//如果调用this.delete()方法
        deleteDataFunction:async(row)=>{
            return DeleteById('role',{id:row.id}).then(res=>{
                const ok = res.data && res.code == "200";
                const msg = res?.message;
                return ({ok,msg})
            })
        },
    },


})
























